import React, { memo, useEffect } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { PlaylistPageWrap } from "./style";
import PlaylistLeft from "./playlist-page/playlist-left";
import PlaylistRight from "./playlist-page/playlist-right";
import { getPlaylistXq } from "./playlist-page/store/actionTypes";

export default memo(function PlaylistPage(props) {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getPlaylistXq(props.match.params.id));
  }, [dispatch, props.match.params.id]); // eslint-disable-line react-hooks/exhaustive-deps

  const state = useSelector(
    (state) => ({
      playlists: state.getIn(["playlist", "playlists"]),
    }),
    shallowEqual
  );

  const name =
    state.playlists.length !== 0 ? state.playlists.playlist.name : "";

  document.title = `${name} - 歌单 - 网易云音乐`;

  return (
    <PlaylistPageWrap>
      <PlaylistLeft
        playlistId={props.match.params.id}
        playlistData={state.playlists}
      />
      <PlaylistRight playlistData={state.playlists} />
    </PlaylistPageWrap>
  );
});
